<template>
  <div class="index-container">
    <el-row :gutter="20">
      <PageHeader />
      <IconList />
      <el-col v-permissions="['SUPER']" :span="24">
        <StatisticArea />
      </el-col>
      <el-col v-permissions="['SUPER']" :span="24">
        <tend :area-no="''" :end-date="endDate" :start-date="startDate" />
      </el-col>
      <el-col :span="24">
        <el-card class="page-header" shadow="never">
          <div class="page-header-tip">
            <p class="page-header-tip-title">
              {{
                '北京北方赛合科技有限公司——北方赛合智慧社区为"民生小事"找到找到高效的解决方案，便捷居民生活!'
              }}
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import IconList from './components/IconList'
  import Tend from './components/Tend'
  import PageHeader from './components/PageHeader'
  import StatisticArea from '@/views/business/components/StatisticArea'
  import dayjs from 'dayjs'

  export default {
    name: 'Index',
    components: {
      StatisticArea,
      IconList,
      Tend,
      PageHeader,
    },
    data() {
      return {
        startDate: '',
        endDate: '',
      }
    },
    created() {},
    mounted() {
      this.startDate = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
      this.endDate = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
    },
  }
</script>

<style lang="scss" scoped></style>
